<!DOCTYPE html>
<html lang="zh">
<!-- 文档可以参考https://developer.mozilla.org/zh-CN/docs/Web -->
<!-- 浏览器的api可以参考webapi部分 -->



<head>
	<meta charset="UTF-8">
	<title>h264转fmp4</title>
</head>

<body>

	<!-- 一个文件选择框，用来选择文件 -->
	<input type="file" id="fileInput" name="ffrag_bunny.mp4"/>

	<!-- 一个画布 -->
	<canvas id="canvas"></canvas>

	<!-- 一个视频播放 -->
	<!-- video标签属性 -->
	<!-- autoplay 尽快播放不等下载完成
	  controls 提供控制面板
	  controlslist 帮助选择控件 -->
	<!-- 调试时开controls可以让你知道播放的情况 -->
	<video id="video1" controls>
		<!-- <source src="h264000060.mp4"> -->
		<!-- 不支持这个标签的浏览器会进到这里 -->
		此浏览器不支持video标签！！！
	</video>



	<script>

		// 注意mp4文件要碎片化
		//var mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
		//var mimeCodec = 'video/mp4; codecs="avc1.64001f, mp4a.40.2"'; //ffrag_bunny.mp4
		var mimeCodec = 'video/mp4; codecs="avc1.640028"'; //fh264000060.mp4

		var fileInput = document.getElementById("fileInput");
		var video1 = document.getElementById("video1");
		var mediaSource = new MediaSource;
		var reader = new FileReader();


		//窗口加载时
		window.addEventListener("load", (e) => {
			console.log(fileInput);
		})



		fileInput.addEventListener("change", (e) => {
			// 读取文件内容（文本格式）
			var file = e.target.files[0]; // 获取用户选择的文件
			console.log(file);
			

			reader.readAsArrayBuffer(file);

			//读取完文件以后
			reader.onload = () => {

				var video = document.getElementById("video1");




				if ('MediaSource' in window && MediaSource.isTypeSupported(mimeCodec)) {

					//console.log(mediaSource.readyState); // closed
					video.src = URL.createObjectURL(mediaSource);
					mediaSource.addEventListener('sourceopen', function (_) {
						//
						var sourceBuffer = mediaSource.addSourceBuffer(mimeCodec)
						sourceBuffer.addEventListener('updateend', function (_) {
							console.log('updateend');
							mediaSource.endOfStream();
							video.play();
						})
						console.log('append');
						sourceBuffer.appendBuffer(reader.result);

					});
				} else {
					console.error('Unsupported MIME type or codec: ', mimeCodec);
				}

			};
		});

	</script>

	<style scoped>
		/* 视频和画布都放-1层，操作元素放上面，宽度为100%，高度自适应 */
		#video1,
		#canvas {
			position: fixed;
			left: 0;
			top: 0;
			/* width: 100%; */
			height: 100%;
			/* 可以通过设置z-index来实现漂浮效果 */
			z-index: -1;
		}
	</style>
</body>

</html>